<template>
  <div>
    <el-row>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="4">
        <el-input v-model="input" placeholder="请输入内容" maxlength="13" show-word-limit></el-input>
        <el-button type="success" @click="genCode()" icon="el-icon-check" circle></el-button>
      </el-col>
    </el-row>
    <img id="barcode"/>
  </div>

</template>

<script>
  import JsBarcode from 'jsbarcode'

  export default {
    name: "GenCode",
    // props: {
    //   data: {
    // type: Number
    // }
    // },
    data() {
      return {
        input: ''
      }
    },
    methods: {
      genCode() {
        JsBarcode("#barcode", this.input, {
          font: "sans-serif",
          format: "CODE128",//选择要使用的条形码类型
          text: this.input,
          displayValue: true,//是否在条形码下方显示文字
          textPosition: "bottom"//设置文本的垂直位置
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>


</style>
